<template>
  <div class="page_main" v-loading="treeLoading">
    <div class="border-all" style="width: 45%">
      <el-table
        :data="deptsTree"
        ref="deptsTree"
        style="width: 100%"
         size="mini"
        highlight-current-row
        @current-change="handleCurrentRowChange"
      >
        <el-table-column
          class-name="one-column"
          label="一级部门名称"
          prop="name"
        >
        </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-button plain size="mini" type="primary" @click="addDeptName(1)"
              :disabled="!isAuth('system:sysdepts:add')"
              >新增</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="margin-right:10px"
              @click="
                modifyDeptName(
                  1,
                  scope.row.name,
                  scope.row.parentId,
                  scope.row.id
                )
              "
              :disabled="!isAuth('system:sysdepts:update')"
              >编辑</el-button
            >
            <el-switch
              :active-value="0"
              :inactive-value="1"
              :value="scope.row.status"
              @change="val => updateDeptStatus(val, scope.row.id)"
              :disabled="!isAuth('system:sysdepts:update:status')"
            /> </template
        ></el-table-column>
      </el-table>
    </div>
    <div class="border-all" style="width: 45%" v-loading="subTreeLoading">
      <el-table :data="deptsSubTree" style="width: 100%" size="mini">
        <el-table-column label="二级部门名称" prop="name"> </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="addDeptName(2, currentRow.id)"
               :disabled="!isAuth('system:sysdepts:add')"
              >新增</el-button
            >
          </template>
          <template slot-scope="treeScope">
            <el-button
              type="text"
              size="mini"
              style="margin-right:10px"
              @click="
                modifyDeptName(
                  2,
                  treeScope.row.name,
                  treeScope.row.parentId,
                  treeScope.row.id
                )
              "
               :disabled="!isAuth('system:sysdepts:update')"
              >编辑</el-button
            >
            <el-switch
              :active-value="0"
              :inactive-value="1"
              :value="treeScope.row.status"
              @change="val => updateDeptStatus(val, treeScope.row.id)"
               :disabled="!isAuth('system:sysdepts:update:status')"
            /> </template
        ></el-table-column>
      </el-table>
    </div>

    <formDialog
      :showBtn="false"
      @refresh="getData"
      ref="formDialog"
    ></formDialog>
  </div>
</template>

<script>
import formDialog from "./depts/formDialog.vue";

export default {
  components: { formDialog },
  data() {
    return {
      deptsTree: [],
      deptsSubTree: [],
      treeLoading: true,
      subTreeLoading: true,
      currentRow: null
    };
  },
  watch: {},
  computed: {},

  methods: {
    // 获取用户管理列表
    async getData() {
      this.treeLoading = true;
      const [err, res] = await this.$Api.Sysdepts.list({
        data: {
          level: 1
        }
      });
      this.treeLoading = false;
      if (!err && res) {
        this.deptsTree = res || [];
        // 设置当前第一行
        this.setCurrentRow(this.deptsTree[0]);
        this.getSubTree(this.deptsTree[0].id);
      }
    },
    // 默认第一项获取二级目录
    async getSubTree(parentId) {
      const [err, res] = await this.$Api.Sysdepts.list({
        data: {
          level: 2,
          parentId
        }
      });
      if (!err && res) {
        this.deptsSubTree = res || [];
        // 设置当前第一行
      }
    },
    // 修改 部门
    modifyDeptName(level, name, parentId, id) {
      this.$refs.formDialog.open({
        edit: true,
        title: "编辑",
        form: {
          level,
          name,
          parentId,
          id
        }
      });
    },
    // 新增 部门
    addDeptName(level, parentId) {
      console.log(level);
      this.$refs.formDialog.open({
        edit: false,
        title: "新增",
        form: {
          level,
          name: "",
          status: 0,
          parentId: parentId
        }
      });
    },
    setCurrentRow(row) {
      console.log("row", row);
      this.$refs.deptsTree.setCurrentRow(row);
      this.currentRow = row;
    },
    async handleCurrentRowChange(val) {
      console.log(val);
      this.currentRow = val;
      this.subTreeLoading = true;
      await this.getSubTree(val.id);
      this.subTreeLoading = false;
    },
    // 修改按钮状态
    async updateDeptStatus(val, id) {
      console.log(val, id);
      this.confirmBox({
        message: "是否确认执行此操作？",
        onConfirm: async () => {
          const [err, res] = await this.$Api.Sysdepts.status({
            data: {
              id,
              status: val
            }
          });
          return Promise.resolve(!err);
        }
      }).then(() => {
        this.handleSuccess("操作成功！");
        this.getData();
      });
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.page_main {
  flex-direction: row;
}

.border-all {
  margin-right: 10px;
  border: 1px solid #ebeef5;
}
</style>


